<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script>
        window.hdjs = {};
        window.hdjs.base = '../';
        window.hdjs.uploader = 'test/php/uploader.php?';
        window.hdjs.filesLists = 'test/php/filesLists.php?';
    </script>
    <script src="../require.js"></script>
    <script src="../config.js"></script>
</head>
<body style="padding: 50px;">
<h2>基本使用</h2>
<input name="birthdate" value="2017-11-07 至 2017-12-22"  class="form-control"/>
<script>
    require(['hdjs','bootstrap'], function (hdjs) {
        hdjs.daterangepicker({
            //标签元素
            element: 'input[name="birthdate"]'
        });
    })
</script>
<hr>
<h2>显示周与时间</h2>
<input name="birthdate" value="2019-02-22 至 2020-3-22" class="form-control"/>
<script>
    require(['hdjs', 'moment','bootstrap'], function (hdjs, moment) {
        hdjs.daterangepicker({
            //标签元素
            element: 'input[name="birthdate"]',
            //选项参考插件官网
            options: {
                ranges: {
                    '最近1小时': [moment().subtract('hours',1), moment()],
                    '今日': [moment().startOf('day'), moment()],
                    '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
                    '最近7日': [moment().subtract('days', 6), moment()],
                    '最近30日': [moment().subtract('days', 29), moment()],
                    '本月': [moment().startOf("month"), moment().endOf("month")],
                    '上个月': [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
                },
                showDropdowns: true,
                alwaysShowCalendars: true,
            },
            callback: function (start, end, label) {
                var str = start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD');
                console.log(str);
            }
        });
    })
</script>

</body>
</html>